<template>
  <div class="app">
    <router-view class="main-content" />

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" route safe-area-inset-bottom placeholder>
      <van-tabbar-item
        v-for="item in navs"
        :key="item.to"
        :to="item.to"
        :icon="item.icon"
      >
        {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const active = ref("/order");

// 路由变化时同步 tabbar 选中项
watch(
  () => route.path,
  (path) => {
    active.value = path;
  },
  { immediate: true }
);

// 导航配置
const navs = [
  { to: "/home", icon: "home-o", text: "首页" },
  { to: "/order", icon: "apps-o", text: "点餐" },
  { to: "/info", icon: "info-o", text: "信息" },
  { to: "/my", icon: "user-o", text: "我的" },
];
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}
</style>
